<template>
	<view>
		<view>
			<map :longitude="item.longitude" :latitude="item.latitude" :markers="mapps.marksers"
				:style="{'width': '100%', 'height': windowHeight+'px'}"></map>

		</view>

		<view>
			<pop-card baseMargin= '0.15'>
			</pop-card>
		</view>
	    <view>
	    <!-- 页面内容 -->
	
	    <!-- 返回按钮 -->
			<view class="back-button" @click="navigateBack">
				<text class="cuIcon-back"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import Util from "../../libs/util.js"
	export default {
		data() {
			return {
				windowHeight:uni.getWindowInfo().windowHeight,
				mapps: {
					marksers: [
					{id:0,
					latitude: 31.9497740,
					longitude: 118.8498340,
					iconPath: '../../static/owner.png',
					width:25,
					height:30,
				
					},
				    {id:1,
					latitude: 31.9445600,
				    longitude: 118.8841030,
				    iconPath: '../../static/qiuchang.png',
					width:25,
					height:30,
				
				    }
					]
				},
				item: {
					longitude: 0,
					latitude: 0
				},
				value1: 1,
				value2: 2,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				maps: {
					polyline: [{
						points: [],
						color: "#31c27c",
						width: 10,
						arrowLine: true,
						borderWidth: 1 //线的边框宽度，还有很多参数，请看文档 
					}]
				},
				list: [{
						name: '社会球场'
					}, {
						name: '商业球场'
					}, {
						name: '自建球场'
					},
					{
						name: '球友匹配'
					}
				],
				current: 0,
				proportionvc: 0.5, //抽屉初始显示的位置，内容的百分比
				handleHeight: 20, //抽屉顶部边框高度，可以设置0，隐藏


				title: 'Hello',
				longitude: 116.3974770000,
				latitude: 39.9086920000,


				autoplay: true,
				interval: 3000,
				duration: 1000,
				indicatorDots: true,
				circular: true,
			}
		},
		onLoad() {

		},
		onReady() {
			this.getLocation()
		},
		methods: {
			 navigateBack() {
			      uni.navigateBack();
			},
			onChange(e) {
				let {
					index
				} = e.detail;
				console.log(index);
				// uni.showToast({
				// 	title: `你点击了${index}`
				// })
			},
			showApp() {
				// uni.navigateTo({
				// 	url:'./app-map'
				// })
			},
			showAppExpand() {
				// uni.navigateTo({
				// 	url:'./app-expand'
				// })
			},
			toAdd() {
				uni.navigateTo({
					url: "/pages/index/add"
				})
			},
			toDetail() {
				uni.navigateTo({
					url: "/pages/index/detail"
				})
			},
			toAppointment() {
				uni.navigateTo({
					url: "/pages/index/appointment"
				})
			},
			change(index) {
				this.current = index;
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => {
						console.log(res)
						this.item.latitude = res.latitude;
						this.item.longitude = res.longitude;
						this.mapps.marksers[0].latitude=res.latitude;
						this.mapps.marksers[0].longitude=res.longitude;
						console.log(this.item)
						Util.maps.reverseGeocoder({
							location: `${this.item.latitude},${this.item.longitude}`,
							success: (res) => {
								console.log(res)

							}
						})
					},
					complete(e) {
						console.log(e)
					}
				});

			},
		}
	}
</script>

<style>
	.container {
		position: relative;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		refresher-background: #ff5500;
	}
	
	.back-button {
	  position: fixed;
	  top: 20rpx;
	  left: 20rpx;
	  width: 100rpx;
	  height: 100rpx;
	  background-color: #FFFFFF;
	  border-radius: 50%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: #000000;
	  font-size: 40rpx;
	  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}
</style>